document.addEventListener('DOMContentLoaded', function() {
    const todoInput = document.getElementById('todo-input');
    const todoList = document.getElementById('todo-list');
    const unfinishedCount = document.getElementById('unfinished-count');
    const clearAllBtn = document.getElementById('clear-all');
    const todoMain = document.getElementById('todo-main');
    const todoFooter = document.getElementById('todo-footer');

    let todos = [];

    // 初始化应用
    function init() {
        loadTodos();
        renderTodoList();
        updateUnfinishedCount();
        setupEventListeners();
    }

    // 从本地存储加载待办事项
    function loadTodos() {
        const saved = localStorage.getItem('todo-list');
        if (saved) {
            todos = JSON.parse(saved);
        }
        toggleMainAndFooter();
    }

    // 保存待办事项到本地存储
    function saveTodos() {
        localStorage.setItem('todo-list', JSON.stringify(todos));
        toggleMainAndFooter();
    }

    // 根据是否有待办事项显示/隐藏主要区域和页脚
    function toggleMainAndFooter() {
        if (todos.length > 0) {
            todoMain.style.display = 'block';
            todoFooter.style.display = 'flex';
        } else {
            todoMain.style.display = 'none';
            todoFooter.style.display = 'none';
        }
    }

    // 设置事件监听器
    function setupEventListeners() {
        todoInput.addEventListener('keyup', function(e) {
            if (e.key === 'Enter') {
                addTodo();
            }
        });

        clearAllBtn.addEventListener('click', clearAllTodos);
    }

    // 添加新的待办事项
    function addTodo() {
        const content = todoInput.value.trim();
        if (content) {
            todos.push({
                id: Date.now(),
                content,
                done: false
            });
            todoInput.value = '';
            saveTodos();
            renderTodoList();
            updateUnfinishedCount();
        }
    }

    // 渲染待办事项列表
    function renderTodoList() {
        todoList.innerHTML = '';
        todos.forEach((todo, index) => {
            const li = document.createElement('li');
            li.className = `todo ${todo.done ? 'completed' : ''}`;
            li.dataset.id = todo.id;

            li.innerHTML = `
        <input type="checkbox" ${todo.done ? 'checked' : ''} class="toggle">
        <span class="index">${index + 1}.</span>
        <label>${todo.content}</label>
        <button class="destroy">X</button>
      `;

            const checkbox = li.querySelector('.toggle');
            const destroyBtn = li.querySelector('.destroy');

            checkbox.addEventListener('change', function() {
                todo.done = this.checked;
                li.className = `todo ${todo.done ? 'completed' : ''}`;
                saveTodos();
                updateUnfinishedCount();
            });

            destroyBtn.addEventListener('click', function() {
                if (confirm('确定删除这项任务吗？')) {
                    removeTodo(index);
                }
            });

            todoList.appendChild(li);
        });
    }

    // 删除待办事项
    function removeTodo(index) {
        todos.splice(index, 1);
        saveTodos();
        renderTodoList();
        updateUnfinishedCount();
    }

    // 清空所有待办事项
    function clearAllTodos() {
        if (confirm('确定清空所有任务吗？')) {
            todos = [];
            saveTodos();
            renderTodoList();
            updateUnfinishedCount();
        }
    }

    // 更新未完成计数
    function updateUnfinishedCount() {
        const count = todos.filter(todo => !todo.done).length;
        unfinishedCount.textContent = count;
    }

    // 初始化应用
    init();
});